<template>
  <div class="content">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="订单发起时间">
        <BiDatePicker
          v-model="formInline.order_time"
          style="width:280px;"
          clearable
          size="small"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <!-- :default-time="['00:00:00', '23:59:59']" -->
      </el-form-item>
      <el-form-item label="订单类型">
        <el-select
          v-model="formInline.order_type"
          placeholder="请选择订单类型"
          clearable
        >
          <el-option
            v-for="(item,index) in orderTypeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付状态">
        <el-select
          v-model="formInline.status"
          placeholder="请选择支付状态"
          clearable
        >
          <el-option
            v-for="(item,index) in statusList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          style="margin-left:10px;"
          @click="startSearch"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-table">
      <BiTable
        :loading="loading"
        :data="tableData"
        size="medium"
        :column="tableColums"
        fixed="sticky"
        fixed-offset="50"
        pagination
        layout="total, prev, pager, next"
        :auto-scroll="false"
        :total="page_info.total"
        :page.sync="page_info.page"
        :limit.sync="page_info.page_size"
        @pagination="handlePageChange"
      >
        <template v-slot:order_status="{row}">
          <p v-if="row.order_status == '拼单中'" class="colorStatus"><span class="dianWait"></span> <span>拼单中</span></p>
          <p v-else-if="row.order_status == '已拼成'" class="colorStatus"><span class="dianSuccess "></span> <span>已拼成</span></p>
          <p v-else-if="row.order_status == '未拼成'" class="colorStatus"><span class="dianFail "></span> <span>未拼成</span></p>
          <p v-else>-</p>
        </template>
        <template v-slot:status="{ row }">
          <div class="colorStatus">
            <p
              v-if="row.status==0"
              class="indeter"
            >未支付</p>
            <p
              v-if="row.status==1"
              class="success"
            >已支付</p>
          </div>
        </template>
      </BiTable>
    </div>
  </div>
</template>

<script>
import { rechangeRecord } from '@/api/userPage'
import { formatNumber } from '@/utils/index'
import { mapState } from 'vuex'
export default {
  components: {},
  props: ['rowInfo'],
  data() {
    return {
      formInline: {
        order_time: [],
        order_type: '',
        status: '',
        order_time_start: '',
        order_time_end: '',
        member_id: ''
      },
      statusList: [
        { label: '未支付', value: 0 },
        { label: '已支付', value: 1 }
      ],
      loading: false,
      tableData: [],
      tableColums: [
        {
          label: '订单号',
          prop: 'order_no',
          width: '200'
        },
        {
          label: '订单渠道',
          prop: 'channel_name',
          width: '200',
          render: (h, { row }) => {
            return (
              <div>
                <p>{row.channel_name}</p>
                <p>{row.channel_id}</p>
              </div>
            )
          }
        },
        {
          label: '订单类型',
          prop: 'product_name'
        },
        {
          label: '活动名称/ID',
          prop: 'activity_title',
          render: (h, { row }) => {
            if (row.activity_title) {
              return <span>{row.activity_title}</span>
            } else {
              return <span>-</span>
            }
          },
          width: '160'
        },
        {
          label: '道具ID',
          width: 120,
          prop: 'prop_id'
        },
        {
          label: '拼团状态',
          prop: 'order_status',
          minWidth: 100,
          slotScope: true
        },
        {
          label: '拼团ID',
          width: 200,
          prop: 'team_id'
        },
        {
          label: '拼团退款',
          prop: 'refund_amount',
          render: (h, { row }) => {
            if (row.refund_amount) {
              return <span>{row.refund_amount} </span>
            } else {
              return <span>- </span>
            }
          }
        },
        {
          label: '订单发起时间',
          prop: 'order_time',
          width: '160'
        },
        {
          label: '染色时间',
          prop: 'seq_time',
          width: '160'
        },
        {
          label: '充值金额',
          prop: 'amount',
          render: (h, { row }) => {
            return <span>{formatNumber(row.amount)} </span>
          }
        },
        {
          label: '充值挽留',
          prop: 'discount',
          render: (h, { row }) => {
            if (row.discount && row.discount !== '') {
              return <span>{row.discount} </span>
            } else {
              return <span>-</span>
            }
          },
          minWidth: 140
        },
        {
          label: '订单状态',
          prop: 'status',
          slotScope: true
        },
        {
          label: '订单完成时间',
          prop: 'pay_time',
          width: '160'
        },
        {
          label: '充值视频',
          prop: 'playlet_title'
        },
        {
          label: '充值集数',
          prop: 'chapter_title'
        }
      ],
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      }
    }
  },
  mounted() {
    this.clickSearch('type')
  },
  computed: {
    ...mapState('common', ['orderTypeList'])
  },
  methods: {
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    startSearch() {
      this.page_info.page = 1
      this.clickSearch()
    },
    onSubmit() {},
    clickSearch(type) {
      this.loading = true
      const data = {
        order_type: this.formInline.order_type,
        status: this.formInline.status,
        order_time_start: (this.formInline.order_time && this.formInline.order_time[0]) || '',
        order_time_end: (this.formInline.order_time && this.formInline?.order_time[1]) || '',
        member_id: this.rowInfo.member_id
      }
      rechangeRecord({ ...data, ...this.page_info }).then((res) => {
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
          !type ? this.$message.success(res.msg) : ''
        }
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>